<template>
  <scroll-view @scrolltolower="handleToLower" class="recommend_view" scroll-y>
    <view>
      <!-- 推荐 开始 -->
      <view class="recommend_wrap">
        <view class="recommend_item" v-for="item in recommends" :key="item.id">
          <image mode="widthFix" :src="item.thumb"></image>
        </view>
        <view >
          <image mode="widthFix" :src="recommends[1].thumb"></image>
        </view>
      </view>
      <!-- 推荐 结束 -->

      <!-- 月份 开始 -->
      <view class="monthes_wrap">
        <view class="monthes_title">
          <view class="monthes_title_info">
            <view class="monthes_info">
              <text>21 / </text>
              08月
            </view>
            <view class="monthes_text">{{ monthes.title }}</view>
          </view>
          <view class="monthes_title_more">更多 > </view>
        </view>
        <view class="monthes_content">
          <view
            class="monthes_item"
            v-for="item in monthes.items"
            :key="item.id"
          >
            <image
              mode="aspectFill"
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
            ></image>
          </view>
        </view>
      </view>
      <!-- 月份 结束 -->

      <!-- 热门开始 -->
      <view class="hots_wrap">
        <view class="hots_title">
          <text>热门</text>
        </view>
        <view class="hots_content">
          <view class="hot_item" v-for="item in hots" :key="item.id">
            <image mode="widthFix" :src="item.thumb"></image>
          </view>
        </view>
      </view>
      <!-- 热门结束 -->
    </view>
  </scroll-view>
</template>

<script>
// import moment from 'moment';
export default {
  data() {
    return {
      //推荐列表
      recommends: [],
      //   月份模块数据
      monthes: {},
      hots: [],
      params: {
        //获取几条数据
        limit: 30,
        // 关键字
        order: "hot",
        // 要跳过几条
        skip: 0,
      },
      hasMore: true,
    };
  },
  methods: {
    //滚动条触底事件
    handleToLower() {
      if (this.hasMore) {
        /*  1. 修改参数 skip+=limit
          2. 重新发送请求 getList
          3. 请求成功，host数据叠加  */
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "被榨干啦",
          icon: "none",
        });
      }
    },
    //   获取接口的数据
    getList() {
      this.request({
        url: "https://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params,
      })
        .then((result) => {
          console.log(result);
          if(result.res.vertical.length===0){
              this.hasMore=false;
              return;
          }
          if (this.recommends.length === 0) {
            // 第一次发送请求
            //推荐模块的数据
            this.recommends = result.res.homepage[1].items;
            console.log(this.recommends[1].thumb);
            // 月份模块的数据
            this.monthes = result.res.homepage[2];
          }

          // 获取热门
          this.hots = [...this.hots, ...result.res.vertical];
        })
        .catch((e) => {
          // 用这个把错误打印出来，仔细查，能解决的。
          console.log("e:", e);
          return;
        });
    },
  },

  // 组件挂载完成
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.recommend_view {
  height: calc(100vh - 36px);
}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .monthes_title_info {
      display: flex;
      color: $color;
      font-size: 30rpx;
      font-weight: 700;

      .monthes_info {
        text {
          font-size: 36rpx;
        }
      }

      .monthes_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }
    .monthes_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }
  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 20rpx solid $color;
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 700;
    }
  }
  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>